<template>
	<div>
		<canvas width="200" height="200" id="canvas"	ref="canvas"></canvas>
	</div>
</template>
<script type="text/javascript">
	import { Game, GameObject } from '@eva/eva.js'
	import { RendererSystem } from '@eva/plugin-renderer'
	import { Graphics, GraphicsSystem } from '@eva/plugin-renderer-graphics'
	export default{
		name: 'EvajsStudyShowGraphics',
		data(){
			return {
				percent: 0,
				game: null
			}
		},
		created(){
			this.$nextTick(()=>{
				this.ShowGraphics()
			})
		},
		destroyed(){
			if(this.game){
				this.game.destroy()
			}
		},
		methods:{
			ShowGraphics(){
				// 创建游戏
				this.game = new Game({
					systems: [ // 游戏添加渲染系统
						new RendererSystem({
							canvas: this.$refs.canvas,
							width: 400,
							height: 400,
						}),
						// 游戏图形系统
						new GraphicsSystem(),
					],
				});
				this.showRect(this.game)
				this.showRoundedRect(this.game)
			},
			showRect(game){
				// 游戏对象
				const outter = new GameObject('container', {
					position: {
						x: 50,
						y: 50
					},
					size: {
						width: 300,
						height: 20
					}
				})
				const progress	= new GameObject('container', {
					position: {
						x: 3,
						y: 3
					}
				})
				// 游戏对象内添加文本内容
				const outterGraphics = outter.addComponent(new Graphics())
				outterGraphics.graphics.beginFill(0xde0000, 1)
				outterGraphics.graphics.drawRect(0, 0, 300, 24)
				outterGraphics.graphics.endFill()

				const progressGraphics = progress.addComponent(new Graphics())

				let i = 0
				setInterval(() => {
					setProgress(i++)
				}, 100)
				// 游戏场景内放置游戏对象
				outter.addChild(progress)
				game.scene.addChild(outter);

				function setProgress(progress) {
					if (progress > 100) return
					const width = Math.max(12, (294 * progress) / 100)
					progressGraphics.graphics.clear()
					progressGraphics.graphics.beginFill(0x000000, 1)
					progressGraphics.graphics.drawRect(0, 0, width, 18)
					progressGraphics.graphics.endFill()
				}
			},
			showRoundedRect(game){
				// 游戏对象
				const outter = new GameObject('container', {
					position: {
						x: 50,
						y: 20
					},
					size: {
						width: 300,
						height: 24
					}
				})
				const progress	= new GameObject('container', {
					position: {
						x: 3,
						y: 3
					}
				})
				// 游戏对象内添加文本内容
				const outterGraphics = outter.addComponent(new Graphics())
				outterGraphics.graphics.beginFill(0xde0000, 1)
				outterGraphics.graphics.drawRoundedRect(0, 0, 300, 24, 12)
				outterGraphics.graphics.endFill()

				const progressGraphics = progress.addComponent(new Graphics())

				let i = 0
				setInterval(() => {
					setProgress(i++)
				}, 100)
				// 游戏场景内放置游戏对象
				outter.addChild(progress)
				game.scene.addChild(outter);

				function setProgress(progress) {
					if (progress > 100) return
					const width = Math.max(12, (294 * progress) / 100)
					progressGraphics.graphics.clear()
					progressGraphics.graphics.beginFill(0x000000, 1)
					progressGraphics.graphics.drawRoundedRect(0, 0, width, 18, 9)
					progressGraphics.graphics.endFill()
				}
			}
		}
	}
</script>